<template>
	<view class="container">
		<view v-if="show" class="realname">
			<u--input v-model="name" prefixIcon="姓名:" input-align="center" placeholder="请输入姓名" class="input"
				border="surround"></u--input>
			<u--input v-model="phone" prefixIcon="手机号:" class="input" maxlength="11" placeholder="请输入手机号"
				border="surround" input-align="center"></u--input>
			<u--input v-model="idNumber" prefixIcon="身份证号:" class="input" maxlength="18" placeholder="请输入身份证号"
				border="surround" input-align="center"></u--input>
		</view>
		<!-- 实名成功 -->
		<view v-else class="conter-box">
			<view class="renzhen_image">
				<image :src="imgUrl + '/static/images/renzhen.png'" mode=""></image>
				<view class="namerenzhen">已认证</view>
			</view>
			<view class="infonumber">
				<view>姓名：</view>
				<view>
					{{ name }}
				</view>
			</view>
			<view class="kdNumber">
				<view>手机号 ：</view>
				<view>
					{{ phone }}
				</view>
			</view>
			<view class="kdNumber">
				<view>身份证号 ：</view>
				<view>
					{{ idNumber }}
				</view>
			</view>
		</view>
		<!-- 实名成功 -->
		<view class="confirm-btn" @click="confim" v-show="show">保存</view>
	</view>
</template>

<script>
	import {
		realName
	} from '@/api/account/account.js';
	import {
		toast
	} from '@/utils/common';
	import config from '@/config.js';
	import {
		getToken,
		getUserAdmin,
		setUserAdmin
	} from '@/utils/auth';
	import {
		filterPhone,
		filterName,
		filterIdNumber
	} from '@/utils/filter.js';
	import {
		getInfo
	} from '@/api/login.js';
	export default {
		data() {
			return {
				show: true,
				imgUrl: config.imgUrl,
				userId: '',
				name: '',
				phone: '',
				idNumber: ''
			};
		},
		created() {
			let userDetail = getUserAdmin();
			if (userDetail.isRealName == 1) {
				this.filter(userDetail);
			}
		},
		onLoad(option) {
			if (option.userId) {
				this.userId = option.userId;
			}
		},
		methods: {
			// 过滤信息
			filter(userDetail) {
				this.name = filterName(userDetail.name);
				this.phone = filterPhone(userDetail.phone);
				this.idNumber = filterIdNumber(userDetail.idNumber);
				this.show = false;
			},
			//提交实名信息
			async confim() {
				if (!this.name) {
					toast('姓名不能为空');
				}
				if (!this.phone) {
					toast('手机号不能为空');
				}
				if (!this.idNumber) {
					toast('身份证号不能为空');
				}
				let param = {};
				param.name = this.name;
				param.phone = this.phone;
				param.idNumber = this.idNumber;
				const res = await realName(param);
				if (res.code == 200) {
					toast('实名成功');
					const info = await getInfo();
					uni.setStorageSync('USER_ADMIN', info.data);
					this.filter(info.data);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-icon__icon {
		font-size: 31rpx !important;
		font-family: PingFang SC-Bold, PingFang SC !important;
		font-weight: 400 !important;
		color: #ffffff !important;
	}

	::v-deep .uni-input-input {
		color: #ffffff;
	}

	::v-deep .u-input--square {
		border-radius: 14rpx;
	}

	.container {
		padding: 20rpx 34.88rpx;
	}

	.realname {
		width: 680rpx;
		height: 400rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx;
		padding: 25rpx 0 0 0;

		.input {
			width: 620rpx;
			height: 80rpx;
			border: none;
			background-color: #13161b;
			border-bottom: 0.5rpx solid #282c34 !important;
			margin: 20rpx 0 35rpx 28rpx;
		}
	}

	.confirm-btn {
		width: 680rpx;
		height: 77rpx;
		background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 400;
		color: #ffffff;
		line-height: 77rpx;
		margin: 34.88rpx 0;
	}

	// 实名成功
	.conter-box {
		width: 680rpx;
		height: 420rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 52rpx;
		opacity: 1;
		margin: 34.88rpx 0;

		.renzhen_image {
			width: 200rpx;
			height: 200rpx;
			margin: auto;

			image {
				width: 63rpx;
				height: 63rpx;
				margin: 52rpx 0 0 75rpx;
			}

			.namerenzhen {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				margin: 10rpx 0 0 65rpx;
			}
		}

		.infonumber {
			width: 680rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			padding: 10rpx 34rpx 0 34rpx;
		}

		.kdNumber {
			width: 680rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			padding: 34rpx;
		}
	}
</style>